<template>
  <router-view></router-view>
  <div class="layout">
      <div class="nav">
        <ul>
          <li :class="{active:$route.path=='/'}"><router-link to="/">
            <van-icon name="wap-home" />
            <p>首页</p>
          </router-link></li>
          <li :class="{active:$route.path=='/article'}"><router-link to="/article">
            <van-icon name="description" />
            <p>文章</p>
          </router-link></li>
          <li :class="{active:$route.path=='/my'}"><router-link to="my">
            <van-icon name="user" />
            <p>我的</p>
          </router-link></li>
        </ul>
      </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
const $router = useRouter()

</script>

<style lang="less" scoped>
@import url(../assets/appColor.less);
.layout{
  padding-bottom: 40px;
  .nav{
    width: 100%;
    position: fixed;
    bottom: 0px;
    ul{
      background-color: @bgcolor;
      width: 100%;
      display: flex;
      justify-content: space-around;
      text-align: center;
      border-top: 1px solid @color3;
      li{
        i{
          font-size: 30px;
          color:  @TColor1;
        }
        p{
          font-size: 20px;
          color: @TColor1;
        }
      }
      .active{
        font-weight: bold;
        p{
          color:@color1;
        }
        i{
          color:@color1;
        }
        
      }
    }
  }
}
</style>
